<template>
  <ScrollView style="height: 400px">
    <li
      v-for="(friendRequest, index) in sharedContactState.friendRequestList"
      :key="index"
    >
      <div
        class="new-friend-item-container radius"
        v-bind:class="{
          disabled: friendRequest.status != 0,
        }"
      >
        <div class="new-friend-item flex flex-cc">
          <!-- 头像 -->
          <div class="flex flex-cc flex-1 mr-10">
            <BaseImage
              class="kang-avatar mr-10"
              :src="friendRequest._target.portrait"
            ></BaseImage>

            <!-- 信息 -->
            <div class="info">
              <!-- 名称 -->
              <div class="name-action">
                <div style="display: flex; align-items: center">
                  <span class="name single-line fw-bold">
                    {{ friendRequest._target.displayName }}
                  </span>
                  <p
                    v-if="isExternalDomainUser(friendRequest._target)"
                    class="single-line fz-10 cl-basic"
                  >
                    {{ domainName(friendRequest._target) }}
                  </p>
                </div>
              </div>

              <!-- 申请原因 -->
              <p class="reason single-line fz-12 cl-basic">
                {{
                  friendRequest.reason
                    ? friendRequest.reason
                    : $t('friend_request.im') +
                      friendRequest._target.displayName
                }}
              </p>
            </div>
          </div>

          <!-- 按钮 -->
          <div class="flex flex-center flex-fs-0">
            <!-- 未添加 -->
            <n-button
              type="primary"
              @click="accept(friendRequest)"
              v-if="friendRequest.status === 0"
            >
              {{ $t('common.add') }}
            </n-button>

            <!-- 已添加 -->
            <n-button
              type="primary"
              disabled
              v-else-if="friendRequest.status === 1"
            >
              {{ $t('friend_request.accepted') }}
            </n-button>

            <!-- 已拒绝 -->
            <n-button
              type="primary"
              disabled
              v-else-if="friendRequest.status === 3"
            >
              {{ $t('friend_request.denied') }}
            </n-button>
          </div>
        </div>
      </div>
    </li>
  </ScrollView>
</template>

<script>
import store from '../../../store'
import wfc from '../../../wfc/client/wfc'
import EventType from '../../../wfc/client/wfcEvent'
import WfcUtil from '../../../wfc/util/wfcUtil'

export default {
  name: 'NewFriendListView',
  props: {
    newFriends: null,
  },
  data() {
    return {
      sharedContactState: store.state.contact,
      isActive: false,
    }
  },
  methods: {
    showFriendRequest(friendRequest) {
      store.setCurrentFriendRequest(friendRequest)
    },
    accept(friendRequest) {
      wfc.handleFriendRequest(
        friendRequest.target,
        true,
        '',
        () => {
          friendRequest.status = 1
        },
        (err) => {
          console.log('accept friend request error', err)
        }
      )
    },
    onFriendRequestUpdate() {
      if (this.isActive) {
        wfc.clearUnreadFriendRequestStatus()
      }
    },
    isExternalDomainUser(user) {
      return WfcUtil.isExternal(user.uid)
    },
    domainName(user) {
      if (WfcUtil.isExternal(user.uid)) {
        let domainId = WfcUtil.getExternalDomainId(user.uid)
        let domainInfo = wfc.getDomainInfo(domainId)
        return '@' + domainInfo.name
      }
      return ''
    },
  },

  activated() {
    this.isActive = true
    wfc.clearUnreadFriendRequestStatus()
  },

  deactivated() {
    this.isActive = false
  },

  mounted() {
    this.isActive = true
    wfc.clearUnreadFriendRequestStatus()
    wfc.eventEmitter.on(
      EventType.FriendRequestUpdate,
      this.onFriendRequestUpdate
    )
  },

  beforeUnmount() {
    this.isActive = false
    wfc.eventEmitter.removeListener(
      EventType.FriendRequestUpdate,
      this.onFriendRequestUpdate
    )
  },
}
</script>

<style lang="scss" scoped>
.new-friend-item-container {
  padding: 10px;
  margin-bottom: 10px;

  &.disabled {
    background-color: var(--color-bg);
  }
}

:deep(.n-button) {
  width: 80px;
  border-radius: 100px;
}
</style>
